import React from 'react';
import PropTypes from 'prop-types';
import {Button, Form, Row, Col} from 'antd';
import {PERMISSION} from './constants';
import {FORM_OPTIONS} from '../constants';
import {partStatus, isYesNo, isDangerousGoods, partChannel} from '../Enum';
import routes from './routes';
import TextInput from 'Shared/components/TextInput';
import TagSelect from 'Shared/components/TagSelect';
import WrappedSelect from '../common/WrappedSelect';
import ExportBasicData from './ExportBasicData';
import ExportCheckedPoperties from './ExportCheckedPoperties';
import ExportSalesAttributes from './ExportSalesAttributes';
import ExportPartSalesPrice from './ExportPartSalesPrice';
import TextArea from 'Shared/components/TextArea';
import {injectIntl, language} from './intl';
import {hasPermissions} from './utils';
const FormItem = Form.Item;


const statusOptions = partStatus.toList(language);
const isYesNoList = isYesNo.toList(language);
const isDangerousGoodsList = isDangerousGoods.toList(language);
const partChannelList = partChannel.toList(language);
class QueryPanel extends React.PureComponent {
    constructor(props) {
        super(props);
        this.handleAddClick = this.handleAddClick.bind(this);
    }
    handleAddClick() {
        this.props.history.push(routes.add.url());
    }

    handleFilterFreeze = () => {
        this.props.searchList();
        this.props.onClickFreezeBtn();
    }
    handleFilterThaw = () => {
        this.props.searchList();
        this.props.onClickThawBtn();
    }

    render() {
        const operations = [];
        const {formatMessage} = this.props.intl;
        if(hasPermissions(this.props.permissions, PERMISSION.freeze))
            operations.push(<Button key="PERMISSION.freeze" onClick={this.handleFilterFreeze}>
                {formatMessage({
                    id: 'queryPanel.freeze',
                    defaultMessage: '批量冻结'
                })}</Button>);
        if(hasPermissions(this.props.permissions, PERMISSION.thaw))
            operations.push(<Button key="PERMISSION.thaw" onClick={this.handleFilterThaw}>
                {formatMessage({
                    id: 'queryPanel.thaw',
                    defaultMessage: '批量解冻'
                })}</Button>);
        if(hasPermissions(this.props.permissions, PERMISSION.importCheckAttributes))
            operations.push(<Button key={PERMISSION.importCheckAttributes} href={`#${routes.importCheckAttributes.url()}`}>
                {formatMessage({
                    id: 'queryPanel.btn.importCheckAttributes',
                    defaultMessage: '导入检查属性'
                })}
            </Button>);
        if(hasPermissions(this.props.permissions, PERMISSION.importSalesAttributes))
            operations.push(<Button key={PERMISSION.importSalesAttributes} href={`#${routes.importSalesAttributes.url()}`}>
                {formatMessage({
                    id: 'queryPanel.btn.importSalesAttributes',
                    defaultMessage: '导入销售属性'
                })}
            </Button>);
        if(hasPermissions(this.props.permissions, PERMISSION.importProduceAttributes))
            operations.push(<Button key={PERMISSION.importProduceAttributes} href={`#${routes.importProduceAttributes.url()}`}>
                {formatMessage({
                    id: 'queryPanel.btn.importProduceAttributes',
                    defaultMessage: '导入生产信息'
                })}
            </Button>);
        return (
            <Form className="form-standard">
                <Row>
                    <Col {...FORM_OPTIONS.col}>
                        <FormItem label={formatMessage({
                            id: 'queryPanel.code',
                            defaultMessage: '备件编号'
                        })} {...FORM_OPTIONS.item}>
                            <TextArea
                                name="code"
                                placeholder={this.props.intl.formatMessage({
                                    id: 'queryPanel.form.code.placeholder',
                                    defaultMessage: '最多输入1000个备件编号，以回车隔开'
                                })}
                                value={this.props.conditions.code}
                                onBlur={this.props.onConditionsChange} />
                        </FormItem>
                    </Col>
                    <Col {...FORM_OPTIONS.col}>
                        <FormItem label={formatMessage({
                            id: 'queryPanel.name',
                            defaultMessage: '备件名称'
                        })} {...FORM_OPTIONS.item}>
                            <TextInput id="name" value={this.props.conditions.name}
                                onBlur={this.props.onConditionsChange}
                                onPressEnter={this.props.handleFilterPressEnter} />
                        </FormItem>
                    </Col>
                    <Col {...FORM_OPTIONS.col}>
                        <FormItem label={formatMessage({
                            id: 'queryPanel.status',
                            defaultMessage: '状态'
                        })} {...FORM_OPTIONS.item}>
                            <WrappedSelect
                                id="status"
                                allowClear={true}
                                value={this.props.conditions.status}
                                onChange={this.props.onConditionsChange}
                                options={statusOptions} />
                        </FormItem>
                    </Col>
                    {!this.props.isDealerUser && <Col {...FORM_OPTIONS.col}>
                        <FormItem label={formatMessage({
                            id: 'queryPanel.categoryCode',
                            defaultMessage: '维护车型'
                        })} {...FORM_OPTIONS.item}>
                            <TextArea
                                name="categoryCode"
                                placeholder={this.props.intl.formatMessage({
                                    id: 'queryPanel.form.categoryCode.placeholder',
                                    defaultMessage: '最多输入1000个维护车型，以回车隔开'
                                })}
                                value={this.props.conditions.categoryCode}
                                onBlur={this.props.onConditionsChange} />
                        </FormItem>
                    </Col>}
                    {!this.props.isDealerUser && <Col {...FORM_OPTIONS.col}>
                        <FormItem
                            label={formatMessage({
                                id: 'queryPanel.isEOL',
                                defaultMessage: '是否停产'
                            })}
                            {...FORM_OPTIONS.item}>
                            <TagSelect
                                name="isEOL"
                                value={this.props.conditions.isEOL}
                                options={isYesNoList}
                                onChange={this.props.onConditionsChange} />
                        </FormItem>
                    </Col>}
                    <Col {...FORM_OPTIONS.col}>
                        <FormItem
                            label={formatMessage({
                                id: 'queryPanel.isDangerousGoods',
                                defaultMessage: '空运危险'
                            })}
                            {...FORM_OPTIONS.item}>
                            <TagSelect
                                name="isDangerousGoods"
                                value={this.props.conditions.isDangerousGoods}
                                options={isDangerousGoodsList}
                                onChange={this.props.onConditionsChange} />
                        </FormItem>
                    </Col>
                    {!this.props.isDealerUser && <Col {...FORM_OPTIONS.col}>
                        <FormItem
                            label={formatMessage({
                                id: 'queryPanel.channel',
                                defaultMessage: '渠道'
                            })}
                            {...FORM_OPTIONS.item}>
                            <WrappedSelect
                                allowClear
                                name="channel"
                                value={this.props.conditions.channel}
                                options={partChannelList}
                                onChange={this.props.onConditionsChange} />
                        </FormItem>
                    </Col>}
                </Row>
                <Row className="operation-buttons">
                    <Col span={8}>
                        <Button key="query" type="primary" onClick={this.props.searchList} loading={this.props.loading}>
                            {formatMessage({
                                id: 'queryPanel.query',
                                defaultMessage: '查询'
                            })}</Button>
                        <Button key="clear" onClick={this.props.onResetClick}>
                            {formatMessage({
                                id: 'queryPanel.reset',
                                defaultMessage: '重置'
                            })}</Button>
                    </Col>
                    <Col span={16} className="col-align-right">
                        {hasPermissions(this.props.permissions, PERMISSION.freeze) &&
                            <Button key={PERMISSION.freeze} onClick={this.handleFilterFreeze}>
                                {formatMessage({
                                    id: 'queryPanel.freeze',
                                    defaultMessage: '批量冻结'
                                })}</Button>}
                        {hasPermissions(this.props.permissions, PERMISSION.thaw) &&
                            <Button key={PERMISSION.thaw} onClick={this.handleFilterThaw}>
                                {formatMessage({
                                    id: 'queryPanel.thaw',
                                    defaultMessage: '批量解冻'
                                })}</Button>}
                        {!this.props.isDealerUser && hasPermissions(this.props.permissions, PERMISSION.importCheckAttributes) &&
                            <Button key={PERMISSION.importCheckAttributes} href={`#${routes.importCheckAttributes.url()}`}>
                                {formatMessage({
                                    id: 'queryPanel.btn.importCheckAttributes',
                                    defaultMessage: '导入检查属性'
                                })}
                            </Button>}
                        {!this.props.isDealerUser && hasPermissions(this.props.permissions, PERMISSION.importSalesAttributes) &&
                            <Button key={PERMISSION.importSalesAttributes} href={`#${routes.importSalesAttributes.url()}`}>
                                {formatMessage({
                                    id: 'queryPanel.btn.importSalesAttributes',
                                    defaultMessage: '导入销售属性'
                                })}
                            </Button>}
                        {!this.props.isDealerUser && hasPermissions(this.props.permissions, PERMISSION.importProduceAttributes) &&
                            <Button key={PERMISSION.importProduceAttributes} href={`#${routes.importProduceAttributes.url()}`}>
                                {formatMessage({
                                    id: 'queryPanel.btn.importProduceAttributes',
                                    defaultMessage: '导入生产信息'
                                })}
                            </Button>}
                        {hasPermissions(this.props.permissions, PERMISSION.exportBasicDatas) &&
                            <ExportBasicData key={PERMISSION.exportBasicDatas} exportRequest={this.props.exportBasicData} />}
                        {!this.props.isDealerUser && hasPermissions(this.props.permissions, PERMISSION.exportCheckedProperties) &&
                            <ExportCheckedPoperties key={PERMISSION.exportCheckedProperties} exportRequest={this.props.exportCheckedPopertiesData} />}
                        {!this.props.isDealerUser && hasPermissions(this.props.permissions, PERMISSION.exportSalesAttributes) &&
                            <ExportSalesAttributes key={PERMISSION.exportSalesAttributes}
                                exportRequest={this.props.exportSalesAttributesPopertiesData} />}
                        {hasPermissions(this.props.permissions, PERMISSION.exportPartSalesPriceData) &&
                            <ExportPartSalesPrice key={PERMISSION.exportPartSalesPriceData}
                                exportRequest={this.props.exportPartSalesPriceData} conditions={{code: this.props.conditions.code,
                                    name: this.props.conditions.name,
                                    isDealerUser: this.props.isDealerUser}} />}
                    </Col>
                </Row>
            </Form>
        );
    }
}

QueryPanel.propTypes = {
    conditions: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired,
    loading: PropTypes.bool.isRequired,
    permissions: PropTypes.array.isRequired,
    searchList: PropTypes.func.isRequired,
    onConditionsChange: PropTypes.func.isRequired,
    onResetClick: PropTypes.func.isRequired,
    exportBasicData: PropTypes.func,
    exportCheckedPopertiesData: PropTypes.func,
    handleFilterPressEnter: PropTypes.func,
};

import {connect} from 'react-redux';
import {
    saveQueryCondition,
    searchList,
    resetQueryPanel,
    exportBasicData,
    exportCheckedPopertiesData,
    exportSalesAttributesPopertiesData,
    exportPartSalesPriceData,
    startBatchFreeze,
    startBatchThaw
} from './actions';
import selectorFactory from 'Shared/utils/immutableToJsSelectorFactory';

const getConditions = selectorFactory(['page', 'appState', 'queryCondition']);
const getPermissions = selectorFactory(['page', 'domainData', 'permission', 'data']);
const getDealerUser = selectorFactory(['page', 'domainData', 'initData', 'isDealerUser']);
const mapStateToProps = state => ({
    permissions: getPermissions(state),
    conditions: getConditions(state),
    loading: state.getIn(['page', 'domainData', 'list', 'isFetching']),
    isShowBatchReceivePanel: state.getIn(['page', 'ui', 'showBatchReceivePanel']),
    isShowBatchThawPanel: state.getIn(['page', 'ui', 'showBatchThawPanel']),
    isDealerUser: getDealerUser(state)
});

const mapDispatchToProps = dispatch => ({
    onConditionsChange: (value, id) => dispatch(saveQueryCondition({[id]: value})),
    handleFilterPressEnter: (value, id) => {
        dispatch(saveQueryCondition({[id]: value}));
        dispatch(searchList());
    },
    searchList: () => dispatch(searchList()),
    onClickFreezeBtn: () => dispatch(startBatchFreeze()),
    onClickThawBtn: () => dispatch(startBatchThaw()),
    onResetClick: () => dispatch(resetQueryPanel()),
    exportBasicData: () => dispatch(exportBasicData()),
    exportCheckedPopertiesData: () => dispatch(exportCheckedPopertiesData()),
    exportSalesAttributesPopertiesData: () => dispatch(exportSalesAttributesPopertiesData()),
    exportPartSalesPriceData: () => dispatch(exportPartSalesPriceData())
});

export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(QueryPanel));
